<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D切割轮播图</title>
    <style>
        body {
            margin: 0;
            padding-top: 0;
            background-color: #F7F7F7;
        }

        ul {
            height: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .view {
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #CCC;
            position: relative;
        }

        .view li {
            width: 112px;
            height: 300px;
            position: absolute;
            /*background-color: #0094ff;*/

            /* 配置3d环境 */
            transform-style: preserve-3d;

            /*transform: rotateX(-30deg) rotateY(30deg);*/

            transition: all 1s linear;
        }

        li:nth-child(2) {
            left: 112px;

        }

        li:nth-child(3) {
            left: 224px;

        }

        li:nth-child(4) {
            left: 336px;

        }

        li:nth-child(5) {
            left: 448px;

        }

        .view li span {
            display: block;
            width: 112px;
            height: 300px;
            position: absolute;
        }

        li > span:nth-child(1) {
            background: url(images/1.jpg) no-repeat;

            transform: translateZ(150px);
        }

        /* 上*/
        li > span:nth-child(2) {
            transform: rotateX(90deg) translateZ(150px);
            /*background-color: pink;*/
            background: url(images/2.jpg) no-repeat;

        }

        /* 背*/
        li > span:nth-child(3) {
            transform: rotateX(180deg) translateZ(150px);
            background: url(images/3.jpg) no-repeat;

        }

        /* 底*/
        li > span:nth-child(4) {
            transform: rotateX(270deg) translateZ(150px);
            background: url(images/4.jpg) no-repeat;
        }

        li:nth-child(2) > span {
            background-position-x: -112px;
        }

        li:nth-child(3) > span {
            background-position-x: -224px;
        }

        li:nth-child(4) > span {
            background-position-x: -336px;
        }

        li:nth-child(5) > span {
            background-position-x: -448px;
        }

        /*按钮*/
        .prev, .next {
            display: block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin-top: -30px;
            font-size: 40px;
            color: #FFF;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;

        }

        .next {
            right: 0;
        }

    </style>
</head>
<body>
<div class="view">
    <ul>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <a href="javascript:;" class="prev">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="./js/jquery.min.js"></script>

<script>
    $(function () {

        var tempIndex = 0;

        var flag = true;
        $(".next").on("click", function () {
            if (flag == true) {
                flag = false;


                tempIndex++;  //反向  tempIndex--

                $(".view li").each(function (index, ele) {

                    //当前的某一个li标签
                    $(this).css("transform", "rotateX(" + tempIndex * -90 + "deg)");
                    //单个属性。
                    $(this).css("transition-delay", index * 0.5 + "s");
                    /*
                     animationend	该事件在 CSS 动画结束播放时触发
                     animationiteration	该事件在 CSS 动画重复播放时触发
                     animationstart	该事件在 CSS 动画开始播放时触发

                     transitionend	该事件在 CSS 完成过渡后触发。


                     onwheel 滚轮事件
                     *
                     * */


                    $(this).on("transitionstart", function () {
                        console.log("transitionstart");
                    })

                    $(this).on("transitionend", function () {


                        //走到了第5张
                        if (index == 4) {
                            flag = true
                        }


                    })

                    //animationEnd
                    //animationStart
                })


            }


        })


    })
</script>

</body>
</html>

<!--
each //遍历
map // 遍历

-->